<template>
  <div class="navigation">  
    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.name}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <div class="navbar_content">
      <div :hidden="activeIndex != 0">
        <map :longitude="longitude" :latitude="latitude" :polyline="polyline" bindmarkertap="showModal" :markers="markers" show-location>      
          <cover-view class="navigateDetails">
            <cover-view>{{duration}}分钟  {{distance}}公里</cover-view>
            <cover-view class="lineDetails" @click="lineDetails">路线详情</cover-view>
            <cover-view class="otherNavigation" @click="showNavigate">其他导航</cover-view>
          </cover-view>     
        </map>   
      </div>
      <div :hidden="activeIndex != 1">选项二的内容</div>
      <div :hidden="activeIndex != 2">选项三的内容</div>
      <div :hidden="activeIndex != 3">选项四的内容</div>
    </div>
    <div class="lineMessage" v-if="show">
      <p v-for="(item,i) in steps" :key = "i">{{item.instruction}}</p>
      <span @click="checkMap">查看地图</span>
    </div> 
  </div>
</template>

<script>

export default {
  data () {
    return {
      tabs: [
        {
          name: "驾车",
          type: "1",
          checked: true
        },
        {
          name: "公交",
          type: "2",
          checked: true
        },
        {
          name: "骑行",
          type: "3",
          checked: true
        },
        {
          name: "步行",
          type: "4",
          checked: true
        }
      ],
      activeIndex: 0,
      longitude: 114.059169,
      latitude: 22.547911,
      polyline:[],
		  markers: [{
        id: 0,
				longitude: 113.93041,
				latitude: 22.53332,
				iconPath: '../../static/images/icon.png',
				width: 40,
        height: 40
        },{
          id: 1,
          longitude: 114.059169,
          latitude: 22.547911,
          iconPath: '../../static/images/icon2.png',
          width: 40,
          height: 40
        }],
      scale: 0,
      duration:'',
      distance:'',
      steps:'',
      show:false
    }
  },
  onLoad() {
    var that = this;
    wx.request({
      url:'https://apis.map.qq.com/ws/direction/v1/driving/',
      data:{
          from: '22.53332,113.93041',
          to: '22.547911,114.059169',
          key:'55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT',         
      },        
      header:{
        'content-type':'application/json'
      },
      //url:'https://apis.map.qq.com/ws/direction/v1/driving/?from=22.547911,114.059169&to=22.549218,114.097927&waypoints=39.111,116.112;39.112,116.113&output=json&callback=cb&key=55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT',
      success:function(res) {
        const coors = res.data.result.routes[0].polyline
        for(var i=2; i< coors.length; i++) { 
            coors[i]= coors[i-2]+ coors[i]/1000000 
          }
          var b=[]; 
          for(var i=0; i< coors.length; i=i+2) { 
            b[i/2]={latitude: coors[i],longitude:coors[i+1] }; 
        }
        that.polyline = [{points: b, color:'#05bc69', width:6, dottedLine:false }]
        that.distance = res.data.result.routes[0].distance/1000;
        that.duration = res.data.result.routes[0].duration;
        that.steps = res.data.result.routes[0].steps;
        //console.log(res.data.result.routes[0].steps);
      }
    })
  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex == 0) {
        return "navbar_slider_0";
      }
      if (this.activeIndex == 1) {
        wx.request({
          url:'https://apis.map.qq.com/ws/direction/v1/transit/',
          data:{
              from: '22.53332,113.93041',
              to: '22.547911,114.059169',
              key:'55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT',         
          },        
          header:{
            'content-type':'application/json'
          },
          //url:'https://apis.map.qq.com/ws/direction/v1/driving/?from=22.547911,114.059169&to=22.549218,114.097927&waypoints=39.111,116.112;39.112,116.113&output=json&callback=cb&key=55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT',
          success:function(res) {
            
            // that.distance = res.data.result.routes[0].distance/1000;
            // that.duration = res.data.result.routes[0].duration;
            // that.steps = res.data.result.routes[0].steps; 
            console.log(res.data.result.routes[0].steps);
          }
        })
        return "navbar_slider_1";
        
      }
      if (this.activeIndex == 2) {
        return "navbar_slider_2";
      }
      if (this.activeIndex == 3) {
        return "navbar_slider_3";
      }
    }
  },
  methods: {
    tabClick(e) {
      this.activeIndex = e.currentTarget.id;
    },
    showNavigate() {
      //跳转到其他导航
      wx.openLocation({
        latitude:22.547911,	//维度
        longitude: 114.059169, //经度
        name: "深圳书城",	//目的地定位名称
        scale: 15,	//缩放比例
        address: "深圳书城"	//导航详细地址
      })
    },
    lineDetails() {
      this.show = true;
    },
    checkMap() {
      this.show = false;
    }
  }
}
</script>

<style scoped lang="stylus">
.navigation 
  font-size 30rpx 
  .navbar 
    display -webkit-box
    display -webkit-flex
    display flex
    position fixed
    z-index 500
    top 0
    height 50rpx
    width 100%
    .navbar_item 
      position relative
      display block
      -webkit-box-flex 1
      -webkit-flex 1
      flex 1
      padding 13rpx 0
      text-align center
      color #000
    .navbar_item_on 
      color #c79e4d
    .navbar_slider 
      position absolute
      content " "
      left 0
      bottom 0
      width 72rpx
      height 4rpx
      background-color #c79e4d
    .navbar_slider_0 
      left 57rpx
      top 60rpx
    .navbar_slider_1 
      left 246rpx
      top 60rpx
    .navbar_slider_2 
      left 434rpx
      top 60rpx
    .navbar_slider_3
      left 620rpx
      top 60rpx
  .navbar_content
    position relative
    top 100rpx
    map
      width 100% 
      height 100vh
      .navigateDetails
        position fixed
        bottom 0
        z-index 2000
        width 100%
        height 200rpx
        background #fff
  .lineMessage 
    width 100%
    height 100vh 
    position fixed
    left 0
    top 0
    z-index 3000
    background #fff
</style>
